<template>
  <div class="manager-layout data-item">
    <back-button @click="backAction" />
    <cg-filter-row :fields="fields" :data="barData" :extra="extra" @init="init" @reset="init" />
    <cg-table :columns="columns" :data="tableData" :page="page" @current-change="onCurrentChange"></cg-table>
  </div>
</template>
<script setup lang="ts">
import { onMounted } from 'vue'
import backButton from '../../../common/components/back-button.vue'
import layout from '../components/manager-layout'

defineOptions({
  name: 'data-item'
})

const { tableData, page, barData, columns, fields, extra, backAction, init } = layout('item')

const onCurrentChange = (index: number) => {
  page.value.setCurrentPage(index)
  init()
}

onMounted(() => {
  init()
})
</script>

<style lang="scss">
.data-item {}
</style>
